<template>
	<view>
		<view class="nav">
			<text class="iconfont icon-xiangzuojiantou ">药师咨询</text>
			<text>结束会话</text>
		</view>
		<view class="ddd">
		</view>

		<view class="nav-2">
			<view class="nav-2-1">
				<image src="../../static/image/classification/ys.png" mode=""></image>
			</view>
			<view class="nav-2-2">
				<view>互联网医院药师</view>
				<view class="v">药师接待时间8：00-22：00</view>
			</view>
		</view>

		<view class="con">

			<view class="con-1">
				<view class="con-1-1">
					<image src="../../static/image/classification/ys.png" mode=""></image>
				</view>

				<view class="con-1-2">
					<view>您好，欢迎进入网上药店互联网医</view>
					<view class="vv">院药师咨询，很高兴为您服务。</view>
				</view>

			</view>

			<view class="con-2">
				<view class="con-2-1">
					<image src="../../static/image/classification/ys-t.png" mode=""></image>
				</view>
				<view class="con-2-2">
					<!-- 络活喜 苯磺酸氨氯地平片 -->
					<text class="con-2-2-2">{{tt}} 5mg*7片</text>
					<view class="ll">
						发给药师
					</view>
				</view>
				
			</view>
			
		</view>
		
		<view class="foot">
			<view class="foot-1">
				<text class="iconfont icon-yuyin-kai2"></text>
			</view>
			<view class="foot-2">
				<input  class="in"   placeholder="请输入关键字" type="text" value="" />
			</view>
			<view class="foot-3">
				发送
			</view>
		</view>

	</view>

</template>

<script>
	import {ref} from 'vue'
	import { useStore } from 'vuex'
	export default {
		setup(){
			const store = useStore()
			 let tt=ref()
			tt.value=store.state.classification.c
				// console.log(tt.value)
			return {tt}
		},
		data() {
			
		},
		methods: {

		}
	}
</script>

<style lang="less">
	@import url("~@/static/fonts/iconfont.css");

	.nav {
		padding: 0 20rpx;
		display: flex;
		width: 750rpx;
	}

	.nav text {
		width: 375rpx;
	}

	.nav text:nth-child(2) {
		text-align: right;
		margin-right: 40rpx;
	}

	.ddd {
		height: 1rpx;
		background-color: #F2F2F2;
		margin: 30rpx 0;
	}

	.nav-2 {
		display: flex;
		width: 750rpx;
		margin-left: 20rpx;
		padding: 10rpx 0;
	}

	.nav-2-1 {
		width: 100rpx;
	}

	.nav-2-1 image {
		width: 100rpx;
		height: 106rpx;
	}

	.nav-2-2 {
		width: 590rpx;
		margin-left: 20rpx;

	}

	.v {
		margin-top: 20rpx;
		color: #999999;
	}

	.con {
		background-color: #F2F2F2;
		padding: 50rpx 0 480rpx 0;
		
	}

	.con-1 {
		display: flex;
		width: 750rpx;
		margin-left: 20rpx;

	}

	.con-1-1 {
		width: 100rpx;
	}

	.con-1-1 image {
		width: 100rpx;
		height: 106rpx;
	}

	.con-1-2 {
		width: 450rpx;
		margin-left: 20rpx;
		background-color: #FFFFFF;
		// padding-left: 20rpx;
		// padding-top: 20rpx;
		// padding-right: 40rpx;
		// padding-bottom: 60rpx;
		padding: 20rpx 40rpx 60rpx 20rpx;
	}

	.vv {
		margin-top: 15rpx;
	}

	.con-2 {
		display: flex;
		width: 650rpx;
		background-color: #FFFFFF;
		padding-top: 20rpx;
		padding-left: 20rpx;
		margin-top: 150rpx;
		margin-left: 50rpx;
	}
	.con-2-2 {
		margin-left: 10rpx;
	}

	.con-2-1 image {
		width: 135rpx;
		height: 140rpx;

	}

	.ll {
		text-align: center;
		margin-left: 60%;
		margin-top: 30rpx;
		margin-bottom: 10rpx;
		background-color: #0079FE;
		color: #FFFFFF;
		width: 150rpx;
		height: 50rpx;
		border-radius: 20rpx;
		line-height: 50rpx;
		padding: 5rpx 8rpx;
	}
	.foot{
		display: flex;
		width: 750rpx;
		align-items:flex-end;
	}
	
	.foot-1{
		width: 100rpx;
		text-align: center;
		
	}
	.icon-yuyin-kai2{
		font-size: 80rpx;
	}
	.foot-2{
		width: 500rpx;
		margin: 0 5rpx;
	}
	.foot-3{
		width: 150rpx;
		background: #0079FE;
		border-radius: 30rpx;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		margin-left: 20rpx;
		color: #FFFFFF;
	}
	.in{
		border: 2px solid #F2F2F2;
		height: 80rpx;
	}
</style>
